<template>
	<view class="after-sale-container">
		<!-- 标签导航 -->
		<view class="tab-nav">
			<view class="tab-item" :class="{active: activeTab === 0}" @click="activeTab = 0">申请售后</view>
			<view class="tab-item" :class="{active: activeTab === 1}" @click="activeTab = 1">售后记录</view>
			<view class="tab-item" :class="{active: activeTab === 2}" @click="activeTab = 2">售后政策</view>
		</view>

		<!-- 申请售后表单 -->
		<view class="after-sale-card" v-if="activeTab === 0">
			<view class="after-sale-header">
				<view class="after-sale-title">申请售后服务</view>
				<view class="after-sale-desc">请填写以下信息，我们将尽快处理您的申请</view>
			</view>

			<!-- 商品信息 -->
			<view class="after-sale-section">
				<view class="section-title">商品信息</view>
				<view class="product-item">
					<view class="product-image">
						<image
							src="https://images.unsplash.com/photo-1560343090-f0409e92791a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=928&q=80"
							mode="aspectFill"></image>
					</view>
					<view class="product-info">
						<view class="product-name">北欧简约风格陶瓷花瓶</view>
						<view class="product-spec">规格：小号 / 白色</view>
						<view class="product-price">
							<view class="product-amount">¥39.90</view>
							<view class="product-quantity">x1</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 售后信息 -->
			<view class="after-sale-section">
				<view class="section-title">售后信息</view>

				<view class="form-group">
					<view class="form-label">售后类型</view>
					<radio-group class="form-radio-group">
						<label class="form-radio-item">
							<radio value="refund" checked color="var(--primary-color)" />仅退款
						</label>
						<label class="form-radio-item">
							<radio value="return" color="var(--primary-color)" />退货退款
						</label>
						<label class="form-radio-item">
							<radio value="exchange" color="var(--primary-color)" />换货
						</label>
					</radio-group>
				</view>

				<view class="form-group">
					<view class="form-label">退款金额</view>
					<input type="text" class="form-input" v-model="refundAmount" placeholder="请输入退款金额" />
				</view>

				<view class="form-group">
					<view class="form-label">申请原因</view>
					<picker class="form-select" mode="selector" :range="reasonOptions" @change="onReasonChange">
						<view>{{ selectedReason || '请选择退款原因' }}</view>
					</picker>
				</view>

				<view class="form-group">
					<view class="form-label">问题描述</view>
					<textarea class="form-textarea" v-model="problemDesc"
						placeholder="请详细描述您遇到的问题，以便我们更好地为您服务"></textarea>
				</view>

				<view class="form-group">
					<view class="form-label">上传凭证</view>
					<view class="upload-area" @click="uploadImage">
						<uni-icons type="camera" size="24" color="#ccc" class="upload-icon"></uni-icons>
						<view class="upload-text">点击上传图片（最多6张）</view>

						<view class="upload-preview" v-if="uploadedImages.length > 0">
							<view class="preview-item" v-for="(img, index) in uploadedImages" :key="index">
								<image :src="img" mode="aspectFill"></image>
								<view class="preview-remove" @click.stop="removeImage(index)">
									<uni-icons type="close" size="12" color="#fff"></uni-icons>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 提交按钮 -->
			<view class="after-sale-actions">
				<button class="after-sale-btn" @click="submitApplication">提交申请</button>
			</view>
		</view>

		<!-- 售后记录 -->
		<view class="after-sale-card" v-if="activeTab === 1">
			<view class="after-sale-section">
				<view class="after-sale-status">
					<view class="status-icon">
						<uni-icons type="reload" size="18" color="#fff"></uni-icons>
					</view>
					<view class="status-info">
						<view class="status-title">退款处理中</view>
						<view class="status-desc">商家正在处理您的退款申请，请耐心等待</view>
					</view>
				</view>

				<view class="product-item">
					<view class="product-image">
						<image
							src="https://images.unsplash.com/photo-1526170375885-4d8ecf77b99f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
							mode="aspectFill"></image>
					</view>
					<view class="product-info">
						<view class="product-name">多功能便携式充电宝 10000mAh</view>
						<view class="product-spec">规格：标准版 / 黑色</view>
						<view class="product-price">
							<view class="product-amount">¥89.90</view>
							<view class="product-quantity">申请退款：¥89.90</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 售后政策 -->
		<view class="after-sale-card" v-if="activeTab === 2">
			<view class="after-sale-section">
				<view class="policy-item">
					<view class="policy-title">退货政策</view>
					<view class="policy-content">
						自收到商品之日起7天内，如产品未使用、包装完好，可申请无理由退货。部分特殊商品因商品属性原因不支持无理由退货，请以商品页面说明为准。
					</view>
				</view>

				<view class="policy-item">
					<view class="policy-title">退款说明</view>
					<view class="policy-content">
						退款申请审核通过后，退款金额将原路返回至您的支付账户，到账时间可能因支付渠道不同而有所差异，请以实际到账时间为准。
					</view>
				</view>

				<view class="policy-item">
					<view class="policy-title">换货说明</view>
					<view class="policy-content">
						如收到的商品存在质量问题，可在收到商品的15天内申请换货。换货商品寄回后，我们将为您安排重新发货，运费由商家承担。
					</view>
				</view>

				<view class="policy-item">
					<view class="policy-title">保修政策</view>
					<view class="policy-content">
						本店销售的商品均享受厂家提供的保修服务，保修期限自收到商品之日起计算。不同商品的保修期可能不同，请以商品页面说明或随商品附带的保修卡为准。
					</view>
				</view>

				<view class="policy-item">
					<view class="policy-title">联系客服</view>
					<view class="policy-content">
						如有任何售后问题，请联系在线客服或拨打客服热线：400-123-4567（工作时间：9:00-18:00）
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import uniIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue';

	const activeTab = ref(0);
	const refundAmount = ref('39.90');
	const selectedReason = ref('');
	const problemDesc = ref('');
	const uploadedImages = ref([]);

	const reasonOptions = [
		'商品质量问题',
		'商品损坏',
		'商品与描述不符',
		'收到商品与下单商品不符',
		'商品缺少配件/赠品',
		'其他原因'
	];

	const onReasonChange = (e) => {
		selectedReason.value = reasonOptions[e.detail.value];
	};

	const uploadImage = () => {
		if (uploadedImages.value.length >= 6) {
			uni.showToast({
				title: '最多上传6张图片',
				icon: 'none'
			});
			return;
		}

		uni.chooseImage({
			count: 6 - uploadedImages.value.length,
			success: (res) => {
				uploadedImages.value = [...uploadedImages.value, ...res.tempFilePaths];
			}
		});
	};

	const removeImage = (index) => {
		uploadedImages.value.splice(index, 1);
	};

	const submitApplication = () => {
		uni.showLoading({
			title: '提交中...'
		});

		// 模拟提交
		setTimeout(() => {
			uni.hideLoading();
			uni.showToast({
				title: '提交成功',
				icon: 'success'
			});
			// 重置表单
			refundAmount.value = '39.90';
			selectedReason.value = '';
			problemDesc.value = '';
			uploadedImages.value = [];
		}, 1500);
	};
</script>

<style lang="scss">
	.after-sale-container {
		padding: 15px;
	}

	.after-sale-card {
		background-color: white;
		border-radius: 8px;
		overflow: hidden;
		margin-bottom: 15px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
		transition: transform 0.2s, box-shadow 0.2s;
	}

	.after-sale-card:hover {
		transform: translateY(-2px);
		box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
	}

	.after-sale-header {
		background-color: var(--primary-color);
		color: white;
		padding: 15px;
		position: relative;
	}

	.after-sale-title {
		font-size: 16px;
		font-weight: bold;
	}

	.after-sale-desc {
		font-size: 13px;
		margin-top: 5px;
		opacity: 0.9;
	}

	.after-sale-section {
		padding: 15px;
		border-bottom: 1px solid var(--border-color);
	}

	.after-sale-section:last-child {
		border-bottom: none;
	}

	.section-title {
		font-size: 15px;
		font-weight: bold;
		margin-bottom: 15px;
		color: var(--text-color);
	}

	.product-item {
		display: flex;
		padding: 15px 0;
		border-bottom: 1px solid var(--border-color);
	}

	.product-item:last-child {
		border-bottom: none;
	}

	.product-image {
		width: 80px;
		height: 80px;
		border-radius: 4px;
		overflow: hidden;
		margin-right: 10px;
	}

	.product-image image {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.product-info {
		flex: 1;
	}

	.product-name {
		font-size: 14px;
		margin-bottom: 5px;
		line-height: 1.4;
	}

	.product-spec {
		font-size: 12px;
		color: #999;
		margin-bottom: 5px;
	}

	.product-price {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.product-amount {
		font-size: 15px;
		font-weight: bold;
		color: var(--primary-color);
	}

	.product-quantity {
		font-size: 13px;
		color: #999;
	}

	.form-group {
		margin-bottom: 15px;
	}

	.form-label {
		display: block;
		font-size: 14px;
		margin-bottom: 8px;
		color: var(--text-color);
	}

	.form-input {
		width: 100%;
		padding: 10px 12px;
		border: 1px solid var(--border-color);
		border-radius: 4px;
		font-size: 14px;
	}

	.form-textarea {
		width: 100%;
		padding: 10px 12px;
		border: 1px solid var(--border-color);
		border-radius: 4px;
		font-size: 14px;
		min-height: 100px;
		resize: none;
	}

	.form-select {
		width: 100%;
		padding: 10px 12px;
		border: 1px solid var(--border-color);
		border-radius: 4px;
		font-size: 14px;
		background-color: white;
	}

	.form-radio-group {
		display: flex;
		flex-wrap: wrap;
		gap: 15px;
	}

	.form-radio-item {
		display: flex;
		align-items: center;
	}

	.form-radio {
		margin-right: 5px;
	}

	.form-radio-label {
		font-size: 14px;
	}

	.upload-area {
		border: 1px dashed var(--border-color);
		border-radius: 4px;
		padding: 15px;
		text-align: center;
		margin-bottom: 15px;
	}

	.upload-icon {
		margin-bottom: 10px;
	}

	.upload-text {
		font-size: 13px;
		color: #999;
	}

	.upload-preview {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		margin-top: 15px;
	}

	.preview-item {
		width: 80px;
		height: 80px;
		border-radius: 4px;
		overflow: hidden;
		position: relative;
	}

	.preview-item image {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.preview-remove {
		position: absolute;
		top: 0;
		right: 0;
		width: 20px;
		height: 20px;
		background-color: rgba(0, 0, 0, 0.5);
		color: white;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 12px;
	}

	.after-sale-actions {
		display: flex;
		padding: 15px;
		justify-content: center;
	}

	.after-sale-btn {
		padding: 10px 20px;
		border-radius: 20px;
		font-size: 14px;
		border: none;
		background-color: var(--primary-color);
		color: white;
		width: 100%;
		max-width: 300px;
	}

	.after-sale-status {
		display: flex;
		align-items: center;
		margin-bottom: 15px;
	}

	.status-icon {
		width: 40px;
		height: 40px;
		border-radius: 20px;
		background-color: var(--primary-color);
		display: flex;
		justify-content: center;
		align-items: center;
		color: white;
		font-size: 18px;
		margin-right: 10px;
	}

	.status-info {
		flex: 1;
	}

	.status-title {
		font-size: 15px;
		font-weight: bold;
		margin-bottom: 3px;
	}

	.status-desc {
		font-size: 13px;
		color: #666;
	}

	.policy-item {
		margin-bottom: 15px;
	}

	.policy-title {
		font-size: 14px;
		font-weight: bold;
		margin-bottom: 5px;
	}

	.policy-content {
		font-size: 13px;
		color: #666;
		line-height: 1.5;
	}

	.tab-nav {
		display: flex;
		background-color: white;
		border-bottom: 1px solid var(--border-color);
		margin-bottom: 15px;
	}

	.tab-item {
		flex: 1;
		text-align: center;
		padding: 12px 0;
		font-size: 14px;
		position: relative;
	}

	.tab-item.active {
		color: var(--primary-color);
		font-weight: bold;
	}

	.tab-item.active:after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 30px;
		height: 2px;
		background-color: var(--primary-color);
	}
</style>